<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>

    <script src="../js/zepto.min.js"></script>
    <script src="../js/zepto.weui.js"></script>

</head>

<body ontouchstart>
<div class="container">
    <div class="page-hd">
        <h1 class="page-hd-title">
            滑动删除
        </h1>
        <p class="page-hd-desc">Swipeout</p>
    </div>
    <div class="page-bd-15">
        <div class="weui-cells">
            <div class="weui-cell weui-cell_swiped" id="s1">
                <div class="weui-cell__bd">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p>左滑列表</p>
                        </div>
                        <div class="weui-cell__ft">向左滑动试试</div>
                    </div>
                </div>
                <div class="weui-cell__ft">
                    <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
                    <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
                </div>
            </div>
            <div class="weui-cell weui-cell_swiped" id="s2">
                <div class="weui-cell__bd">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p>左滑列表</p>
                        </div>
                        <div class="weui-cell__ft">向左滑动试试</div>
                    </div>
                </div>
                <div class="weui-cell__ft">
                    <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
                </div>
            </div>
            <div class="weui-cell weui-cell_swiped" id="s3">
                <div class="weui-cell__bd">
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                        <div class="weui-cell__bd">
                            <p>左滑列表</p>
                        </div>
                        <div class="weui-cell__ft">向左滑动试试</div>
                    </div>
                </div>
                <div class="weui-cell__ft">
                    <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">取消关注</a>
                </div>
            </div>
        </div>



    </div>



    <br>
    <br>
    <div class="weui-footer weui-footer_fixed-bottom">
        <p class="weui-footer__links">
            <a href="../index.html" class="weui-footer__link">WeUI首页</a>
        </p>
        <p class="weui-footer__text">Copyright &copy; Yoby</p>
    </div>
</div>

<script>

 /*   js加载进来用
    $('.weui-cell_swiped').swipeout()
    初始化
    $('.weui-cell_swiped').swipeout('close') 关闭
    */
 
    $('.delete-swipeout').click(function () {
        $(this).parents('.weui-cell').remove()
    })
    $('.close-swipeout').click(function () {
        $(this).parents('.weui-cell').swipeout('close')
    })

 $('.weui-cell_swiped').swipeout('open')
    
</script>
</body>
</html>